<template>
  <transition>
    <div class="app-product-add">
      <section class="app-main">

        <mt-field label="商品编码" placeholder="请输入商品编码" v-model="post.commAttribCode"></mt-field>
        <mt-field label="商品名称" placeholder="请输入商品名称" v-model="post.commAttribName"></mt-field>
        <mt-field label="原厂编码" placeholder="请输入原厂编码" v-model="post.originalCode"></mt-field>
        <mt-field label="商品分类" placeholder="请选择商品分类" v-model="post.classify" readonly="readonly" @click.native="popupShow=true"></mt-field>
        <mt-field label="采购价" placeholder="请输入采购价" type="number" v-model="post.purchasePrice"></mt-field>
        <mt-field label="批发价" placeholder="请输入批发价" type="number" v-model="post.wholesalePrice"></mt-field>
        <mt-field label="销售价" placeholder="请输入销售价" type="number" v-model="post.retailPrice"></mt-field>

        <div class="button-content">
          <mt-button type="primary" @click="handleSurePost">确定</mt-button>
        </div>

        <mt-popup
          v-model="popupShow"
          position="bottom" class="me-popup-classify">
          <div class="top-department" v-if="popupAddClassify" @click="handleSelectTopClassify">
            <span class="node-expand iconfont icon-wenjian1" type="text"></span><span class="node-text">顶级分类</span></div>
            <Tree @selectPart="selectPart"
                  @deletePart="deletePart"
                  @editPart="editPart"
                  :treeData="partList">
            </Tree>
          <div class="button-content button-content-add-part">
            <mt-button type="primary" @click="handleAddPart">添加分类</mt-button>
          </div>
        </mt-popup>

        <!--新增分类-->
        <mt-popup
          v-model="popupAddClassify"
          position="bottom"
          class="me-popup-classify popup-classify-add">
          <template>
            <mt-field label="商品分类" placeholder="请输入商品分类" v-model="classify.name"></mt-field>
            <mt-field class="field-part" label="上级分类" placeholder="请选择上级分类" readonly="readonly" v-model="classify.parentName"  @click.native="popupShow=true"></mt-field>
          </template>
          <div class="button-content">
            <div class="button-block-6">
              <mt-button type="default" @click="popupAddClassify = false">取消</mt-button>
            </div>
            <div class="button-block-6">
              <mt-button type="primary" @click="handleConfirmPart">确定</mt-button>
            </div>
          </div>
        </mt-popup>
      </section>
    </div>
  </transition>
</template>

<script>
  import { Header,Cell,Toast,MessageBox} from 'mint-ui';
  import Tree from '../common/tree.vue';
  export default {
    components:{
      Tree
    },
  data () {
    return {
      popupShow:false,
      resData:'',
      partList:[],
      popupAddClassify:false,
      classify:{
        id:'',
        name:'',
        parentId:'',
        parentName:'',
      },
      post:{
        classifyId:'',
        classify:'',
        commAttribCode:'',
        commAttribName:'',
        originalCode:'',
        purchasePrice:'',
        wholesalePrice:'',
        retailPrice:'',
        isActive:'',
      }
    }
  },
  mounted(){
    this.getData();
  },
  methods:{
    getData(){


      this.$axios({
        method: 'post',
        url:'gp/util/ajax!getBdTree.do?bdType=bu_classify.classify_id.classify',
      }).then((res)=>{
        this.partList=res.data;
      console.log(this.partList,12313)
    })

      if(this.$route.query.id!=undefined){

        /**获取商品详情**/
        var params = new URLSearchParams();
        params.append('form.commAttribId', this.$route.query.id);
        params.append('plateFormFlag','0101');
        this.$axios({
          method: 'post',
          url:'gp/app/commattribApp!getDetail.do?',
          data:params,
        }).then((res)=>{

          this.resData=res.data.object;

        this.post.commAttribCode=this.resData.commAttribCode
        this.post.commAttribName=this.resData.commAttribName
        this.post.originalCode=this.resData.originalCode
        this.post.purchasePrice=this.resData.purchasePrice
        this.post.wholesalePrice=this.resData.wholesalePrice
        this.post.retailPrice=this.resData.retailPrice
        this.post.classify=this.resData.classify
        this.post.classifyId=this.resData.classifyId
        this.post.isActive=this.resData.isActive

      });
      }
    },
    handleSelectTopClassify(){
      this.popupShow=false;
      this.classify.parentName='顶级分类';
      this.classify.parentId='';
    },
    selectPart(data){
      console.log(data)
      this.popupShow=false;
      this.post.classify=data.text;
      this.post.classifyId=data.id;
      this.classify.parentName=data.text;
      this.classify.parentId=data.id;

    },
    deletePart(data){
      MessageBox({
        title: '',
        message: '确认是否删除该分类?',
        showCancelButton: true
      }).then(action => {
        if(action=='confirm'){

        var params = new URLSearchParams();
        params.append('form.classifyId', data.id);
        this.$axios({
          method: 'post',
          url:'gp/bu/classify!deleteClassify.do',
          data:params
        }).then((res)=>{
          if(res.data.result==true){
          this.getData();
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:800
          });
        }

      })

      };
    })
    },
    editPart(){},
    handleSurePost(){

      if(this.post.commAttribCode==''){
        Toast({
          message: '请输入商品编码',
          position: 'middle',
          duration: 1000
        });
        return false;
      }
      if(this.post.commAttribName==''){
        Toast({
          message: '请输入商品名称',
          position: 'middle',
          duration: 1000
        });
        return false;
      }

      var params = new URLSearchParams();
      params.append('form.commAttribCode',this.post.commAttribCode);
      params.append('form.commAttribName',this.post.commAttribName);
      params.append('form.originalCode',this.post.originalCode);
      params.append('form.purchasePrice',this.post.purchasePrice);
      params.append('form.wholesalePrice',this.post.wholesalePrice);
      params.append('form.retailPrice',this.post.retailPrice);
      params.append('form.classify',this.post.classify);
      params.append('form.classifyId',this.post.classifyId);
      if(this.$route.query.id!=undefined){
        params.append('form.commAttribId', this.$route.query.id);
        params.append('form.isActive', this.post.isActive);
      }
      this.$axios({
        method: 'post',
        url:'gp/bu/commattrib!saveCommattrib.do',
        data:params
      }).then((res)=>{
        if(res.data.result==true){
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 1500
        });

        if(this.$route.query.id!=undefined){
          setTimeout(()=>{
            this.$router.push({path:'/product-management-details',query: {id:this.$route.query.id}})
        },1500)
        }else{
          this.$router.push({path:'/product-management'})
        }
      }else{
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 1500
        });
      }

    })

    },
    /**添加分类**/
    handleAddPart(){
      this.classify={
        id:'',
        name:'',
        parentName:'',
        parentId:'',
      };
      this.popupAddClassify=true;
      this.popupShow=false;
    },
    handleConfirmPart(){
      if(this.classify.name==''){
        Toast({
          message: '请输入产品分类',
          position: 'middle',
          duration: 1000
        });
        return false;
      }
      var params = new URLSearchParams();
//      if(this.part.id!=''){
//        params.append('form.departmentId', this.part.id);
//      }
      params.append('form.classify', this.classify.name);
      params.append('form.parentId', this.classify.parentId);
      this.$axios({
        method: 'post',
        url:'gp/bu/classify!saveClassify.do',
        data:params
      }).then((res)=>{
        if(res.data.statusCode==200){
        this.popupAddClassify=false
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 1500
        });
        this.getData();
      }else{
        this.popupAddClassify=false
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 2000
        });
      }
    })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

  .app-product-add .app-main{
    /*padding:12px 0 0;*/
  }
  .app-product-add .app-main .staff-details{
    margin:0 0 12px;
  }
  .app-product-add .button-content{
    display: flex;
    padding:24px 36px;
  }
  .app-product-add .button-content .mint-button{
    width: 100%;
  }
  .app-product-add .button-content .mint-button--primary{
    background:#007EE5;
  }
  .app-product-add .me-popup-classify{
    width: 100%;
    min-height: 40%;
    max-height: 100%;
    padding:12px 16px;
    overflow: auto;
  }

  .app-product-add .popup-classify-add .button-block-6{
    display: inline-block;
    width: 50%;
    padding:0 10px;
  }
  .app-product-add .popup-classify-add .button-block-6 .mint-button{
    display: block;
    width: 100%;
  }
  .app-product-add .popup-classify-add .button-content{
    padding:16px 0;
  }
  .app-product-add .popup-classify-add .button-content .mint-button{
    width: 100%;
  }
</style>
